<template>
    <div class="list">
        <div class="title">
            小说总数:<span style="color:red">{{book_count}}</span>
        </div>
        <div class="utils">
            <el-input placeholder="输入标题" v-model="books_params.q_title"></el-input>
            <el-input placeholder="输入作者" v-model="books_params.q_author"></el-input>
            <el-input placeholder="输入分类" v-model="books_params.q_cate_name"></el-input>
            <el-button type="primary" @click="getBookList">搜索</el-button>
            <el-button type="success">添加</el-button>
        </div>
        <div class="table">
            <el-table :data="bookList" border stripe size="small" height="580px" align="center" v-loading="loading" element-loading-text="加载中..." >
                <el-table-column prop="id" label="id" width="40" align="center" />
                <el-table-column prop="book_title" label="标题" width="150" align="center" />
                <el-table-column prop="book_author" label="作者"  width="100" align="center"/>
                <el-table-column prop="category_name" label="分类名称" width="80"  align="center"/>
                <el-table-column prop="book_describe" label="描述"  class-name='describe' align="center"/>
                <el-table-column prop="avatar_url" label="小说封面" class-name="book_img" width="70"  align="center">
                    <template #default="scope">
                        <div>
                            <el-image :src="scope.row.image_url">
                                <template #error>
                                    <div class="image-slot">
                                        <el-icon>
                                            <icon-picture />
                                        </el-icon>
                                    </div>
                                </template>
                            </el-image>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="count" label="总字数" width="80" align="center" />
                <el-table-column prop="state" label="状态" width="50" align="center" />
                <el-table-column prop="source_server" label="源服务器" width="180" align="center" />
                <el-table-column prop="create_time" label="创建时间" width="140" align="center">
                    <template #default="scope">
                        <div>{{formatDate(scope.row.create_time)}}</div>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="id" label="操作">
                    <template #default="scope">
                        <el-button type="primary" size="small" @click="handleEdit(scope.$index, scope.row)">详情</el-button>
                        <el-button type="warning" size="small" @click="handleUpdate(scope.$index, scope.row)">修改</el-button>
                        <el-button type="danger" size="small"  @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="demo-pagination-block">
            <div class="page">
                <el-pagination v-model:currentPage="books_params.page" v-model:page-size="books_params.count"
                    :page-sizes="[10, 15,20,25]" prev-text="上一页" next-text="下一页" :hide-on-single-page="true"
                    layout="total, sizes, prev, pager, next, jumper" :total="book_count" @size-change="getBookList"
                    @current-change="getBookList" />
            </div>
        </div>
    </div>
</template>

<script lang='ts' setup>
import { reactive, ref, Ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus';
import { BookListItf } from '@/pages/admin/book/ts/list'
import { bookApi } from '@/api/admin'
import {formatDate} from '@/utils/common'
let bookList: Ref<BookListItf[]> = ref([])
let book_count = ref(0)
let loading = ref(true)

let books_params:{count:number,page:number,q_title:string,q_cate_name:string,q_author:string} = reactive({ count:10, page: 1,q_title:"",q_cate_name:"",q_author:"" })
let getBookList = async () => {
    loading.value = true
    let result: any = await bookApi({...books_params})
    if (result.code == 200) {
        if(Array.isArray(result.data.data)){
            bookList.value = result.data.data
        }else{
            bookList.value = []
        }
        book_count.value = result.data.count
    } else {
        console.log(result.err_msg)
        ElMessage({
            type: 'error',
            message: '服务器错误!'
        })
    }
    loading.value = false
}

let handleEdit = (index: number, row: BookListItf) => {

}
let handleDelete = (index: number, row: BookListItf) => {

}
let handleUpdate = (index: number, row: BookListItf) => {


}


onMounted(() => {
    getBookList()
})
</script>

<style lang='scss' scoped>
.list {
    padding:0 15px;
    .title {
        font-size: 14px;
    }
    ::deep(.cell){
        width: 200px;
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box; /** 将对象作为伸缩盒子模型显示 **/
        -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
        -webkit-line-clamp: 3; /** 显示的行数 **/
        overflow: hidden;  /** 隐藏超出的内容 **/
    }
    ::deep(.el-table .cell) {
        width: 200px;
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box; /** 将对象作为伸缩盒子模型显示 **/
        -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
        -webkit-line-clamp: 3; /** 显示的行数 **/
        overflow: hidden;  /** 隐藏超出的内容 **/
    }

    :deep(.describe){
        .cell{
            max-height: 70px;
            overflow: hidden;  
        }
    }
    :deep(.book_img){
        img{
            width: 45px;
            height: 70px;
        }
    }
    .page{
        margin-top: 10px;
        display: flex;
        justify-content: center;
    }
    .utils{
        display:flex;
        .el-input{
            width: 150px;
        }
        .el-button{
            width: 60px;
            text-align: center;
        }
        .el-button,.el-input{
            margin:10px 0;
            margin-right: 15px;
        }
    }
}
</style>